<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Title</title>
	<script src="js/vue-2.6.12.js"></script>
</head>
<body>

<div id="app">

	<h2>{{totalPrice}}</h2>


</div>

<script>
	
	let app = new Vue({
	  
	  el:"#app",
	  data:{
	    
	    products:[
	      {
	        name:'123',
	        price:15,
	        count:20
	      },
	      {
	        name:'12234',
	        price: 30,
	        count: 30
	      }
	    ]
	    
	  },
	  methods:{
	  
	  },
	  computed:{
	    // 计算products 的总价格
	    totalPrice(){
	     
	      //reduce() 方法的作用是对数组中所有的元素内容进行整合
	      // 第一个参数是一个函数 函数有两个参数 (preValue,n) 第一个参数是初始值, 第二个参数是数组的元素,
	      // 第二个参数 是第一个参数(函数)的 preValue的初始值
	      this.products.reduce(    function (preValue,n){return preValue + n.count*n.price;}  ,  0 )
	      
          // return this.products.reduce((total,p)=>{ return total+p.price*p.count},0)

        }
	    
	  }
	  
	})
	
</script>

</body>
</html>